<template>
  <div class="device">
    <div class="device-left">
      <p class="device-left-title">平台设备总数</p>
      <div class="device-left-echart">
        <div class="echart-msg">
          <div class="echart-msg-top">
            <p>平台设备总数</p>
            <p>
              <span>{{ deviceTotal }}</span> 个
            </p>
          </div>
          <div class="echart-msg-bottom">
            <p>在线设备数</p>
            <p>
              <span>{{ deviceOnline }}</span> 个
            </p>
          </div>
        </div>
        <div class="echart-ratio">
          <el-progress type="circle" :width="111" :percentage="percentage">
            <template #default="{percentage}">
              <span class="percentage-value">{{ percentage.toFixed(2) }}%</span>
            </template>
          </el-progress>
        </div>
      </div>
      <div class="device-left-line"></div>
      <div class="device-left-line1"></div>
      <div class="device-left-total">
        <p>昨日在线设备数</p>
        <p>{{ deviceYesterday }}<span>个</span></p>
      </div>
    </div>
    <div class="device-line"></div>
    <div class="device-line1"></div>
    <div class="device-right">
      <p class="device-right-title">平台设备统计排名（按公司）</p>
      <div class="device-right-list">
        <div class="device-right-list-item" v-for="(item, index) in deviceRank" :key="index">
          <p :class="`item-${index + 1}`">{{ index + 1 }}</p>
          <div class="device-right-list-item-msg">
            <p :title="item.unit_name">{{ item.unit_name }}</p>
            <p>{{ item.count }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import censusApi from '@/api/census.ts';

const percentage = ref<Number>(25);
const deviceTotal = ref<Number>(609);
const deviceOnline = ref<Number>(320);
const deviceYesterday = ref<Number>(340);

const deviceRank = ref([]);
// 获取设备统计
const getDeviceRank = async () => {
  const res = await censusApi.deviceRank();
  deviceRank.value = res.data.unit;
  deviceTotal.value = res.data.device_count;
  deviceOnline.value = res.data.online_count;
  deviceYesterday.value = res.data.yesterday_online_count;
  percentage.value = (res.data.online_count / res.data.device_count).toFixed(2) * 100;
};
onMounted(() => {
  getDeviceRank();
});
</script>
<style lang="scss" scoped>
.device {
  display: flex;
  color: #fff;
  margin-top: 40px;
  p {
    margin: 0;
  }
  &-left {
    padding-left: 68px;
    &-title {
      font-size: 18px;
      font-weight: bold;
    }

    &-echart {
      margin-top: 25px;
      display: flex;
      align-items: flex-end;
      .echart-msg {
        &-top {
          > p:nth-of-type(1) {
            color: #fff;
            opacity: 0.7;
          }
          > p:nth-of-type(2) {
            color: #fff;
            > span {
              font-size: 24px;

              font-weight: bold;
            }
          }
        }
        &-bottom {
          margin-top: 17px;
          > p:nth-of-type(1) {
            color: #fff;
            opacity: 0.7;
          }
          > p:nth-of-type(2) {
            > span {
              font-size: 40px;
              color: #00fcff;
              font-weight: bold;
            }
          }
        }
      }
      .echart-ratio {
        margin-left: 85px;
        .percentage-value {
          color: #fff;
          font-size: 26px;
          font-weight: bold;
        }
      }
    }
    &-line {
      margin-top: 35px;
      width: 340px;
      height: 3px;
      background: #080f2f;
    }
    &-line1 {
      width: 340px;
      height: 3px;
      background: #2c3d83;
    }
    &-total {
      display: flex;
      align-items: center;
      margin-top: 20px;
      justify-content: space-between;
      > p:nth-of-type(1) {
        color: #fff;
        opacity: 0.7;
      }
      > p:nth-of-type(2) {
        color: #fff;
        font-size: 24px;
        font-weight: bold;
        > span {
          font-size: 13px;
          opacity: 0.9;
          font-weight: normal;
          margin-left: 5px;
        }
      }
    }
  }
  &-line {
    width: 3px;
    height: 285px;
    margin-left: 60px;
    background: #2c3d83;
  }
  &-line1 {
    width: 3px;
    height: 285px;
    background: #080f2f;
  }
  &-right {
    padding: 0 45px 0 21px;
    &-title {
      font-size: 18px;
      font-weight: bold;
    }
    &-list {
      margin-top: 25px;
      &-item {
        display: flex;
        margin-bottom: 11px;
        font-size: 10px;
        > p {
          width: 18px;
          height: 18px;
          text-align: center;
          line-height: 18px;
        }
        .item-1,
        .item-2,
        .item-3 {
          background: #0094ff;
          border-radius: 50%;
          color: #19265b;
        }
        &-msg {
          width: 300px;
          display: flex;
          justify-content: space-between;
          margin-left: 11px;
          > p:nth-of-type(1) {
            width: 230px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
